<template>
  <div id="IndexMain">
    <div class="Navmenu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        router
        @select="handleSelect"
      >
        <el-menu-item :index="'/Index/Order'" style="margin-left: 15em"
          >订单详情</el-menu-item
        >
        <el-menu-item index="/Index/User" :disabled="position"
          >用户管理</el-menu-item
        >
        <el-menu-item index="/Index/Warehouse">库存管理</el-menu-item>
        <el-menu-item index="/Index/Statistics">统计图表</el-menu-item>

        <h3 class="title">送水服务管理系统</h3>
        <h4 class="userinfo">用户名:{{ realName }}</h4>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    const store = useStore(); // 获取store 实例

    const realName = computed(() => store.state.realName);
    const position = computed(() => store.state.position);

    return { realName, position };
  },
};
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: white !important;
  border-bottom-color: #409eff !important;
}

.title {
  margin-left: auto;
  margin-right: -15%;
}

.userinfo {
  margin-left: auto;
  margin-right: 5%;
}
</style>